<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        form {
            width: 335px;
            /* height: 345px;    */
            background: skyblue;
            margin: 50px auto;
            padding-right: 50px;
            padding-top: 5px;
            padding-left: 15px;
        }

        input {
            width: 250px;
            float: right;
        }

        input[type='text'] {
            font-size: 12px;
        }

        .error {
            font-size: 12px;
            line-height: 12px;
            text-align: right;
            color: red;
            display: block;
            visibility: hidden;
        }
    </style>
</head>

<body>
    <form>
        <p>
            <label for="user">
                账号：<input id="userName" type="text" placeholder="用户不得使用特殊字符，长度在6-20之间">
            </label>
            <span class="error">账号不能为空</span>
            <span class="error">请按账号规则要求输入</span>
        </p>
        <p>
            <label for="userName">
                昵称：<input id="userName" type="text" placeholder="输入3-6个中文">
            </label>
            <span class="error">昵称请输入3-6个中文</span>
        </p>
        <p>
            <label for="mail">
                电子邮件：<input id="mail" type="text" placeholder="输入163邮箱">
            </label>
            <span class="error">请正确输入163邮箱</span>
        </p>
        <p>
            <label for="idCard">
                身份证：<input id="idCard" type="text" placeholder="请输入身份证">
            </label>
            <span class="error">请输入正确的身份证号码</span>
        </p>
        <p>
            <label for="iphNum">
                手机号码：<input id="iphNum" type="text" placeholder="请输入手机号码">
            </label>
            <span class="error">请输入正确的手机号码</span>
        </p>
        <p>
            <label for="birthday">
                生日：<input id="birthday" type="text" placeholder="请输入你的生日">
            </label>
            <span class="error">请按照格式输入生日</span>
        </p>
        <p>
            <label for="passWord">
                密码：<input id="passWord" type="password" placeholder="请输入密码">
            </label>
            <span class="error">请按照格式正确输入密码</span>
        </p>
        <p>
            <label for="dbPassWord">
                确认密码：<input id="dbPassWord" type="password" placeholder="再次输入密码">
            </label>
            <span class="error">两次密码不一致</span>
        </p>

        <button id="yeah">确认</button>
        <button id="reset">清空</button>
    </form>

    <script>
        var form = document.getElementsByTagName('form')
        var input = document.getElementsByTagName('input')
        var span = document.getElementsByTagName('span')

        var userReg = /^[a-zA-Z][\w|\-]{6,20}$/
        var userNameReg = /[\u4e00-\u9fa5]{3,6}/
        var mailReg = /^[a-zA-Z][\w|\-]{5,17}@(163)\.(com|cn|.net)$/
        var idCardReg = /^\d{17}(\d|x)$/
        var iphnumReg = /^1[356789]\d{9}$/
        var birthdayReg = /^\d{4}(-|\/)?(0[1-9]|1[0-2])\1(0[1-9]|[1-2]\d|3[0-1])$/
        var passWord = /^\S{1,20}$/i

        for (var i = 0; i < input.length; i++) {
            input[0].onblur = function () {
                if (input[0].value === '') {
                    // alert("账号不能为空")
                    span[0].style.visibility = 'visible'
                } else if (!userReg.test(input[0].value)) {
                    // alert("请按账号规则要求输入")
                    span[1].style.visibility = 'visible'
                }
            }
            input[1].onblur = function () {
                if (!userNameReg.test(input[1].value)) {
                    // alert("请按昵称规则要求输入")
                    span[2].style.visibility = 'visible'
                }
            }
            input[2].onblur = function () {
                if (!mailReg.test(input[2].value)) {
                    // alert("请按163邮箱规则要求输入")
                    span[3].style.visibility = 'visible'
                }
            }
            input[3].onblur = function () {
                if (!idCardReg.test(input[3].value)) {
                    // alert("请输入正确身份证号码")
                    span[4].style.visibility = 'visible'
                }
            }
            input[4].onblur = function () {
                if (!iphnumReg.test(input[4].value)) {
                    // alert("请输入正确手机号码")
                    span[5].style.visibility = 'visible'
                }
            }
            input[5].onblur = function () {
                if (!birthdayReg.test(input[5].value)) {
                    // alert("请输入正确生日日期")
                    span[6].style.visibility = 'visible'
                }
            }
            input[6].onblur = function () {
                if (!passWord.test(input[6].value)) {
                    // alert("请输入长度不超过20的密码")
                    span[7].style.visibility = 'visible'
                }
            }
            input[7].onblur = function () {
                if (!input.value !== input[7].value) {
                    // alert("前后密码输入不一致")
                    span[8].style.visibility = 'visible'
                }
            }
        }
    </script>
</body>

</html>